<template>
  <div class="ApplyList">
    <van-nav-bar
      :title="$route.meta.title"
      left-arrow
      :border="false"
      @click-left="clickLeft"
      @click-right="clickRight"
    >
      <template #right>
        <van-icon name="plus" size="24" />
        <span style="margin-left: 2px; color: #fff; margin-top: 3px;font-size:20px">新增</span>
      </template>
    </van-nav-bar>
    <van-cell-group class="applyContent">
      <template #default>
        <van-list :offset="50" :finished="finished" finished-text="暂无数据">
          <van-swipe-cell
            :name="v.iautoid"
            :key="v.iautoid"
            v-for="(v, index) in list"
            :before-close="beforeClose"
            ref="swipecell"
          >
            <van-cell
              title-class="custom-title"
              value-class="custom-value"
              label-class="custom-label"
              :title="v.materialName"
            >
              <template #default>
                <van-tag v-if="v.state == 20" type="warning">待检验</van-tag>
                <van-tag v-else-if="v.state == 30" type="primary"
                  >检验中</van-tag
                >
                <van-tag v-else-if="v.state == 50" type="warning"
                  >复检中</van-tag
                >
                <van-tag v-else-if="v.state == 55" type="warning"
                  >校对中</van-tag
                >
                <van-tag v-else-if="v.state == 56" type="warning"
                  >修改中</van-tag
                >
                <van-tag v-else-if="v.state == 60" type="warning"
                  >待审核</van-tag
                >
                <van-tag v-else-if="v.state == 70" type="warning"
                  >待签批</van-tag
                >
                <van-tag v-else-if="v.state == 80" type="success"
                  >检验完成</van-tag
                >
                <van-tag v-else-if="v.state == 100" type="danger">撤回</van-tag>
                <van-tag v-else type="default">未知状态</van-tag>
              </template>
              <template #label>
                <div>申请时间：{{ v.applyDate }}</div>
                <div>物料批号：{{ v.batchID }}</div>
                <div>规格：{{ v.materialStandard }}</div>
                <div>检验单号：{{ v.testID }}</div>
                <div>检验结果：{{ v.testResult }}</div>
              </template>
            </van-cell>
            <template #right>
              <van-button
                square
                block
                type="primary"
                text="查看"
                style="height: 100%"
                @click.stop="checkPdfForm(v, index)"
              />
              <van-button
                v-if="v.state == 20"
                :loading="recalling"
                loading-text=" "
                square
                block
                type="danger"
                text="撤回"
                style="height: 100%"
              />

              <van-button
                v-else-if="v.state == 100"
                loading-text=" "
                square
                block
                type="danger"
                text="删除"
                style="height: 100%"
                @click.stop="deleteInfo(v, index)"
              />
            </template>
          </van-swipe-cell>
        </van-list>
      </template>
    </van-cell-group>

    <van-popup
      v-model="showFiltering"
      safe-area-inset-bottom
      get-container="body"
      position="right"
      style="width: 50vw; height: 100% !important"
    >
      <div class="popup-content">
        <div class="popup-content__content">
          <van-row>
            <van-col span="24">
              <van-field
                v-if="isRouterAlive"
                v-model="materialType"
                name="materialType"
                label="物料类型"
                input-align="center"
              >
                <template #input>
                  <material-type v-model="materialType" />
                </template>
              </van-field>
            </van-col>
            <van-col span="24">
              <van-field
                v-if="isRouterAlive"
                v-model="materialCode"
                name="materialCode"
                label="物料名称"
                input-align="center"
              >
                <template #input>
                  <material-name
                    :materialType="materialType"
                    v-model="materialCode"
                  />
                </template>
              </van-field>
            </van-col>
            <van-col span="24">
              <van-field
                v-model="batchID"
                name="batchID"
                label="进场批号"
                input-align="center"
                placeholder="请填写"
              >
              </van-field>
            </van-col>
            <van-col span="24">
              <van-field
                v-model="inspecNumber"
                name="inspecNumber"
                label="检验单号"
                input-align="center"
                placeholder="请填写"
              >
              </van-field>
            </van-col>
          </van-row>
          <van-tag class="margin-left:10px">状态</van-tag>
          <van-radio-group v-model="radio">
            <van-cell-group>
              <van-cell title="全部" clickable @click="radio = null">
                <template #right-icon>
                  <van-radio :name="null" />
                </template>
              </van-cell>
              <van-cell title="待检验" clickable @click="radio = 20">
                <template #right-icon>
                  <van-radio :name="20" />
                </template>
              </van-cell>
              <van-cell title="检验中" clickable @click="radio = 30">
                <template #right-icon>
                  <van-radio :name="30" />
                </template>
              </van-cell>
              <van-cell title="复检中" clickable @click="radio = 50">
                <template #right-icon>
                  <van-radio :name="50" />
                </template>
              </van-cell>
              <van-cell title="校对中" clickable @click="radio = 55">
                <template #right-icon>
                  <van-radio :name="55" />
                </template>
              </van-cell>
              <van-cell title="修改中" clickable @click="radio = 56">
                <template #right-icon>
                  <van-radio :name="56" />
                </template>
              </van-cell>
              <van-cell title="待审核" clickable @click="radio = 60">
                <template #right-icon>
                  <van-radio :name="60" />
                </template>
              </van-cell>
              <van-cell title="待签批" clickable @click="radio = 70">
                <template #right-icon>
                  <van-radio :name="70" />
                </template>
              </van-cell>
              <van-cell title="检验完成" clickable @click="radio = 80">
                <template #right-icon>
                  <van-radio :name="80" />
                </template>
              </van-cell>
              <van-cell title="撤回" clickable @click="radio = 100">
                <template #right-icon>
                  <van-radio :name="100" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>

        <div class="popup-content__footer">
          <van-button block @click="handleReset">重置</van-button>
          <van-button
            native-type="button"
            type="primary"
            block
            @click.stop="handleFilter"
            >筛选</van-button
          >
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model="showPdf"
      safe-area-inset-bottom
      get-container="body"
      position="left"
      style="width: 60vw; height: 100%"
    >
      <div class="popup-content">
        <div class="popup-content__content" id="PDF" v-html="failMsg"></div>
				<HPDFViewer :path="pdfUrl" />
      </div>
    </van-popup>
    <van-popup
      v-model="showPreviewReport"
      safe-area-inset-bottom
      get-container="body"
      position="bottom"
      style="height: 78%"
    >
      <preview-report-pdf :report-id="reportID" />
    </van-popup>

    <van-popup
      v-model="showPreviewCheckItems"
      safe-area-inset-bottom
      get-container="body"
      position="right"
      style="height: 100%; width: 80vw"
    >
      <report-check-items :test-id="testID" />
    </van-popup>
  </div>
</template>

<script>
import HPDFViewer from "@/components/HPDFViewer";
import {
  Field,
  CellGroup,
  Cell,
  SwipeCell,
  Tag,
  List,
  Button,
  Dialog,
  Popup,
  TreeSelect,
  RadioGroup,
  Radio,
  Col,
  Row,
  NavBar,
  Icon,
	Notify,
} from "vant";
import {
  getApplyListPage,
  callBackApply,
  deleteApply,
  getApplyTicket,
} from "@/api/check";
import MaterialType from "@/components/MaterialType";
import MaterialName from "@/components/MaterialName";
// import { materialTree } from '@/api/base';
// import PreviewReportPdf from '@/components/PreviewReportPdf';
// import ReportCheckItems from './ReportCheckItems'

export default {
  components: {
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [SwipeCell.name]: SwipeCell,
    [Tag.name]: Tag,
    [List.name]: List,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [TreeSelect.name]: TreeSelect,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Col.name]: Col,
    [Row.name]: Row,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    MaterialType,
    MaterialName,
		HPDFViewer
  },
  props: {
    toggleFilter: Boolean,
  },
  data() {
    return {
      token: "",
      domain: "",
      materialType: "",
      materialCode: "",
      batchID: "",
      inspecNumber: "",
      list: [],
      loading: false,
      recalling: false,
      showFiltering: false,
      radio: null,
			pdfUrl: '',
      showPreviewReport: false,
      reportID: "",
      showPreviewCheckItems: false,
      testID: "",
      isRouterAlive: true,
      finished: false,
      showPdf: false,
      pdfh5: null,
      failMsg: "",
    };
  },
  watch: {},
  methods: {
    clickLeft() {
      this.$router.replace({ name: "home" });
    },
    clickRight() {
      this.$router.replace({ name: "ApplyForm" });
    },
    handleReset() {
      this.isRouterAlive = false;
      this.$nextTick(() => (this.isRouterAlive = true));
      this.materialType = "";
      this.materialCode = "";
      this.batchID = "";
      this.inspecNumber = "";
      this.radio = null;
    },
    handleFilter() {
      this.showFiltering = false;
      this.error = false;
      this.list = [];
      this.fetchList();
    },
    beforeClose({ position, instance, name }) {
      switch (position) {
        case "right":
          Dialog.confirm({
            message: "确定撤回吗？",
          })
            .then(() => {
              this.recallApply(instance, name);
            })
            .catch(() => {
              instance.close();
            });
          break;
      }
    },
    recallApply(instance, iautoid) {
      this.recalling = true;
      callBackApply({
        deleteModel: { iautoid, Token: this.token },
      })
        .then(() => {
          this.recalling = false;
          instance.close();

          const item = this.list.find((v) => v.iautoid === iautoid);
          item.state = 100;
        })
        .catch(() => {
          this.recalling = false;
        });
    },
    deleteInfo(v, index) {
      var q = { iautoid: v.iautoid, Token: this.token };
      Dialog.confirm({
        message: "确定删除吗？",
      }).then(() => {
        this.deleteApply(q);
      });
    },
    deleteApply(q) {
      var that = this;
      deleteApply(q).then(() => {
        for (var i = 0; i < this.list.length; i++) {
          if (this.list[i].iautoid === q.iautoid) {
            that.list.splice(i, 1);
            return false;
          }
        }
      });
    },
    fetchList() {
      var queryParams = {
        Rows: "",
        Page: 1,
        Search: [
          this.materialCode,
          this.batchID,
          this.inspecNumber,
          this.radio,
        ],
        Token: this.token,
      };
      getApplyListPage(queryParams)
        .then((response) => {
          const { Result } = response;
          const { rows, total } = Result;
          this.list = rows;
          if (this.list.length == 0) {
            this.finished = true;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.error = true;
        });
    },
    checkPdfForm(v, index) {
      var id = v.iautoid;
      var result = {
        Token: this.token,
        iautoid: id,
        Tickets: [
          { code: "MaterialName", name: "名称", value: "", group: "" },
          { code: "Origin", name: "单位", value: "", group: "" },
          { code: "OriginType", name: "供应类型", value: "", group: "" },
          { code: "TestID", name: "编号", value: "", group: "" },
          { code: "BatchID", name: "批号", value: "", group: "" },
          { code: "Standard", name: "规格", value: "", group: "" },
          { code: "DeptmentName", name: "请验部门", value: "", group: "" },
          { code: "Total", name: "数量", value: "", group: "" },
          { code: "ApplyUser", name: "申请人", value: "", group: "" },
          { code: "ApplyDate", name: "请验日期", value: "", group: "" },
          { code: "SampleUser", name: "签收人", value: "", group: "" },
          { code: "SampleDate", name: "日期", value: "", group: "" },
          { code: "TestStandard", name: "检验标准", value: "", group: "" },
          { code: "ProductDate", name: "生产日期", value: "", group: "" },
          { code: "EffectDate", name: "有效期", value: "", group: "" },
          { code: "ProducerName", name: "生产商", value: "", group: "" },
          { code: "ApplyRemarks", name: "请验类别", value: "", group: "" },
        ],
      };
      getApplyTicket(result)
        .then((response) => {
          var path = response.Result.path;
          if (path) {
            this.failMsg = "";
						this.showPdf = true;
						this.pdfUrl = path;
          } else {
						Notify({ type: 'danger', message: '未找到文件' });
          }
        })
        .catch(() => {});
    },
  },
  created() {
    this.token = localStorage.getItem("tokenKey");
    this.domain = localStorage.getItem("domain");
    this.fetchList();
  },
};
</script>
<style lang="less" scoped>
.ApplyList {
  height: 100%;
  overflow: hidden;
}
/deep/.van-nav-bar {
  height: 1rem;
}
/deep/.van-nav-bar__content {
  height: 1rem !important;
}
.applyContent {
  height: calc(100% - 1rem);
  overflow-y: auto;
}
.custom-title {
  flex: 1;
  width: 0;
  .custom-label > div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.custom-value {
  flex: none;
}

.popup-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .popup-content__content {
    overflow: auto;
  }

  .popup-content__footer {
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    button {
      height: 30px;
    }
  }
}
/deep/.van-swipe-cell__right {
  display: flex;
  flex-direction: column;
}
/deep/.van-tag {
  margin-left: 10px;
}
/deep/.van-hairline--top-bottom{
  position: static;
}
</style>